<template>
  <div class="detail">
    <!-- 返回 -->
    <div class="back">
      <!-- <span class="iconfont" @click="back">&#xe67c;</span> -->
      <van-icon name="arrow-left" @click="back" size="25" />
      <span v-show="!isShow">{{ msg }}</span>
    </div>
    <MusicLaoding v-if="laoding" />
    <div v-else>
      <!-- 背景图片 -->
      <van-sticky offset-top="-150">
        <div class="bgcImg">
          <div class="bgc">
            <img :src="bgcImg + '?param=200y200'" alt="" />
          </div>
          <div class="img_box">
            <div class="img">
              <img :src="bgcImg + '?param=200y200'" alt="" />
            </div>
            <div class="titel">
              <p class="van-multi-ellipsis--l2">{{ msg }}</p>
              <p class="van-multi-ellipsis--l2">{{ synopsis }}</p>
            </div>
          </div>
        </div>
        <div class="play_box">
          <span class="allplay" @click="playMusic(0)">
            <span class="iconfont">&#xea82;</span>
          </span>
          <span class="allPlaytext" @click="playMusic(0)">全部播放</span>
          <span class="Musilength"> ({{ music.length }})</span>
        </div>
      </van-sticky>

      <!-- 音乐列表 -->
      <div class="music_box" v-for="(item, index) in musics" :key="index.id">
        <div class="index" @click="playMusic(index)">{{ index + 1 }}</div>
        <div class="text van-ellipsis" @click="playMusic(index)">
          <p class="van-ellipsis">{{ item.name }}</p>
          <p class="van-ellipsis">
            <span class="tagColor" v-if="item.fee == 1 || item.fee == 4"
              >版权
            </span>
            <span class="tagColor" v-else>SQ </span>
            <span>{{ item.ar }}</span>
            -
            <span>{{ item.al }}</span>
          </p>
        </div>
        <div class="slice">
          <VueMusicMenu :id="item.id" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MusicLaoding from "@/components/common/laoding.vue";
import { GetAlbumListAPI } from "@/api/api.js";
import VueMusicMenu from "@/components/common/menu.vue";
export default {
  name: "MusicAlbumList",
  components: {
    MusicLaoding,
    VueMusicMenu,
  },
  data() {
    return {
      bgcImg: "",
      msg: "",
      synopsis: "",
      music: [],
      laoding: true,
      isShow: true,
    };
  },

  mounted() {
    let id = this.$route.query.id || this.$route.query.alId;
    GetAlbumListAPI({ id }).then((res) => {
      this.bgcImg = res.data.album.blurPicUrl;
      this.msg = res.data.album.name;
      this.synopsis = res.data.album.description;
      this.music = res.data.songs;
      if (res.status == 200) {
        this.laoding = false;
      }
    });
    window.addEventListener("scroll", this.handleScroll, true);
  },
  computed: {
    musics() {
      const musics = this.music.map((item) => ({
        id: item.id,
        name: item.name,
        picUrl: item.al.picUrl,
        al: item.al.name,
        alId: item.al.id,
        ar: item.ar.map((arItem) => arItem.name).join("/"),
        arList: item.ar.map((item) => ({
          arname: item.name,
          arid: item.id,
        })),
        arId: item.ar[0].id,
        fee: item.fee,
      }));
      return musics;
    },
  },
  methods: {
    back() {
      this.$router.go("-1");
    },
    handleScroll() {
      if (window.pageYOffset >= 150) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
    playMusic(index) {
      this.$store.commit({
        type: "SET_PLAY_MUSIC",
        index: index,
        list: this.musics,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  background-color: #fafafa;
  .back {
    z-index: 999;
    position: fixed;
    top: .3125rem;
    left: 0rem;
    height: 2.5rem;
    width: 100%;
    line-height: 2.5rem;
    display: flex;

    .van-icon {
      height: 2.5rem;
      width: 1.875rem;
      font-size: 1.5625rem;
      line-height: 2.5rem;
      color: #fff;
    }
    span:nth-child(2) {
      flex: 1;
      font-size: .875rem;
      color: #fff;
      font-weight: bold;
      padding-right: 1.875rem;
    }
  }
  // 背景图片
  .bgcImg {
    position: relative;
    width: 100%;
    height: 12.5rem;
    overflow: hidden;

    .bgc {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      filter: blur(.625rem);
      transform: scale(1.5);
    }
    img {
      width: 100%;
      height: 100%;
    }
    .img_box {
      position: relative;
      position: absolute;
      top: 50%;
      left: 1.875rem;
      transform: translate(0, -50%);
      display: flex;
      height: 6.25rem;
      .img {
        width: 6.25rem;
        height: 6.25rem;
        border-radius: .3125rem;
        overflow: hidden;
        margin-right: .625rem;
        .playCount {
          position: absolute;
          bottom: .1875rem;
          left: .3125rem;
          font-size: .75rem;
          color: #edeef0;
          text-align: left;
          .iconfont {
            font-size: .75rem;
          }
        }
      }
      .titel {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        max-width: 14.375rem;
        p {
          width: 100%;
        }

        p:nth-child(1) {
          font-size: .875rem;
          text-align: left;
          color: #fff;
        }
        p:nth-child(2) {
          font-size: .75rem;
          text-align: left;
          color: #fff;
        }

        p:nth-child(3),
        p:nth-child(4) {
          font-size: .75rem;
          text-align: left;
          color: #fff;
        }
      }
    }
  }
  // 播放按钮
  .play_box {
    height: 3.125rem;
    line-height: 3.125rem;
    text-align: left;
    background-color: #fff;
    .allplay {
      display: inline-block;
      width: 1.875rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      .iconfont {
        font-size: 1.125rem;
      }
    }
    .allPlaytext {
      font-weight: bold;
      font-size: 1rem;
      padding-left: .1875rem;
    }
    .Musilength {
      line-height: 3.125rem;
      font-size: .75rem;
    }
  }
  // 音乐列表
  .music_box {
    display: flex;
    margin: .3125rem 0rem;
    background-color: #fff;
    .index {
      width: 1.875rem;
      height: 3.125rem;
      line-height: 3.125rem;
      text-align: center;
      font-size: 1rem;
      font-weight: bold;
      color: #fb5430;
    }
    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      p {
        height: 1.5625rem;
        line-height: 1.5625rem;
        text-align: left;
        padding-left: .3125rem;
        font-size: 1rem;
        color: #5a7cab;
      }
      p:nth-child(2) {
        color: #a0a0a0;
        font-size: .75rem;
        .tagColor {
          color: #fb5430;
        }
      }
    }
    .slice {
      width: 3.125rem;
      height: 3.125rem;
    }
  }
}
</style>